<template>
    <UserView class="UserPeruseView">
        <h2>我最喜欢</h2>
        <div class="card">
            <div class="card-body card-book-control">
                <div class="card card-book-single mb-3" v-for="book_user_ranking in book_user_rankings" :key="book_user_ranking.id" style="max-width: 540px;">
                    <div class="row g-0 cmdksmk">
                        <div class="col-md-4">
                            <img :src="book_user_ranking.photo" class="img-fluid rounded-start" alt="...">
                        </div>
                        <div class="col-md-8">
                        <div class="card-body">
                            <h5 class="card-title">{{ book_user_ranking.book_title }}</h5>
                            <p class="card-text"><small class="text-muted">{{ book_user_ranking.author }}</small></p>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </UserView>
</template>

<script>
import UserView from '@/components/UserView.vue';
import $ from 'jquery';
import { ref } from 'vue';
import { useStore } from 'vuex';
export default {
    name: "UserFavoriteView",
    components: {
        UserView,
    },
    setup() {
        const store = useStore();
        const book_user_rankings = ref([]);
        let count = ref(0);
        $.ajax({
            url: "http://47.121.28.202:8000/settings/ranking/",
            type: "GET",
            headers: {
                'Authorization': "Bearer " + store.state.user.access,
            },
            data: {
                user_id: store.state.user.id,
            },
            success(resp) {
                for (let i of resp) {
                    if (i.book_score > 30 && count.value < 4) {
                        book_user_rankings.value.push(i);
                        count.value ++;
                    }
                }
            }
        })

        return {
            book_user_rankings
        }
    }
}
</script>

<style scoped>
.card-single {
    margin-bottom: 10px;
}
.btn-success {
    float: right;
}
.UserPeruseView {
    user-select: none;
}
.card-book-single {
    display: inline-block;
    height: 200px;
    width: 400px;
    margin: 20px;
    position: relative;
    left: 63px;
}
.col-md-4 {
    width: 120px;
    height: 200px;
}
.img-fluid {
    height: 100%;
    width: 120px;
}
</style>